<template>
	<view class="bg">
		<image src="@/static/bg.png" mode=""></image>
	</view>
	<view class="login-data">
		<view class="login-data-contents">
			<view class="login-logo">
				<image src="@/static/logo.png" mode=""></image>
				<text>多多助教</text>
				<text>挑战极限，掌握台球艺术</text>
			</view>
		</view>
	</view>
	<view class="write-phone">
		<view class="write-phone-login">
			<view class="write-input">
				<input type="number" v-model="writePhone" placeholder="请输入手机号" />
				<view class="write-send-phone-code">
					<input type="number" v-model="sendCode" placeholder="请输入验证码" />
					<text @click="handleGetCode">获取验证码</text>
				</view>
			</view>
		</view>
	</view>
	<view class="sure-button">
		<view class="sure-button-content">
			<button @click="loginSendChange">登录</button>
		</view>
	</view>


	<view class="other">
		<view class="other-contents">
			<text>其他方式登陆</text>
			<image src="@/static/wechats.png" mode=""></image>
		</view>
		<view class="agree-with">
			<view class="agree-with-contents">
				<view class="agree-check">
					<view class="check" @click="sureCheckChange" v-if="!currentCheck">

					</view>
					<image v-if="currentCheck" @click="sureCheckChange" src="@/static/surecheck.png" mode=""></image>
					<view class="agree-text">
						<text @click="sureCheckChange">点击同意</text>
						<text>用户协议</text>
						<text @click="sureCheckChange">及</text>
						<text>隐私协议</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { postHttpsRequset } from '@/public-ts-file/request';
	const currentCheck = ref(false)
	const writePhone = ref('18716272749')
	const sendCode = ref('9999')
	const sureCheckChange = () => {
		currentCheck.value = !currentCheck.value
	}

	// 获取验证码
	const handleGetCode = () => {
		const parms = {
			path: '/shop/index/sendsms',
			methods: 'post',
			data: {
				token: '',
				tel: writePhone.value
			}
		}
	}

	const loginSendChange = () => {
		console.log('1223')
		if (!writePhone.value) {
			return uni.showToast({
				title: '手机号不能为空',
				icon: "none"
			})
		}
		if (!currentCheck.value) {
			return uni.showToast({
				title: '请同意用户协议和隐私协议',
				icon: 'none'
			})
		}
		const parms = {
			path: '/shop/Login/login',
			methods: 'post',
			data: {
				tel: writePhone.value,
				code: sendCode.value
			}
		}
		postHttpsRequset(parms).then(async res => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			if (res.code == 200) {
				uni.setStorageSync('userinfo', res.data)
				uni.setStorageSync('token', res.data.token)
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}, 800)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.bg {
		image {
			position: absolute;
			top: 0;
			height: 100%;
			width: 100%;
			left: 0;
			z-index: -1;
		}
	}

	.login-data {
		padding-top: 188rpx;

		.login-data-contents {
			.login-logo {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 48rpx;
					font-weight: bold;
					color: #3377FE;
					font-family: 'SYZT';

					&:nth-last-child(1) {
						font-weight: 400;
						font-size: 28rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.write-phone {
		margin: 0 90rpx;
		margin-top: 120rpx;

		.write-phone-login {
			.write-input {
				>input {
					border-bottom: 1px solid #F0F0F0;
					padding-bottom: 8rpx;
					font-size: 30rpx;
				}

				.write-send-phone-code {
					margin-top: 50rpx;
					border-bottom: 1px solid #F0F0F0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 10rpx;

					input {
						flex: 1;
						font-size: 30rpx;
					}

					text {
						font-size: 24rpx;
						color: #3377FE;
					}
				}
			}
		}
	}


	.sure-button {
		margin: 0 90rpx;
		margin-top: 56rpx;

		.sure-button-content {
			button {
				background: #3377FE;
				color: white;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 6rpx 0;
				border-radius: 1000rpx;

				&::after {
					display: none;
				}
			}
		}
	}


	.other {
		position: absolute;
		bottom: 5%;
		width: 100%;

		.other-contents {
			margin: 0 100rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			text {
				font-size: 28rpx;
				color: #999999;
			}

			image {
				width: 60rpx;
				height: 60rpx;
				margin-top: 30rpx;
			}
		}

		.agree-with {
			.agree-with-contents {
				.agree-check {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 120rpx;

					image {
						width: 38rpx;
						height: 38rpx;
					}

					.check {
						width: 30rpx;
						height: 30rpx;
						border: 1px solid #999999;
						border-radius: 100rpx;
					}

					.agree-text {
						margin-left: 8rpx;

						text {
							font-size: 26rpx;
							color: #999999;

							&:nth-child(2),
							&:nth-last-child(1) {
								color: #3377FE;
							}
						}
					}
				}
			}
		}
	}

	.actives {}
</style>